<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
    <title>Ibatch-WorkflowEditor</title>
    <!--<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-datetimepicker.min.css">
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-theme.min.css">-->
    <!--<link rel="stylesheet" type="text/css" href="../../../webjar/bootstrap/css/font-awesome.min.css">-->
    <link rel="stylesheet" media="all" type="text/css" href="../../../webjar/bootstrap/3.3.7-1/css/bootstrap.min.css">
    <link rel="stylesheet" media="all" type="text/css" href="../../../webjar/bootstrap/3.3.7-1/css/bootstrap-theme.min.css">
    <link rel="stylesheet" media="all" type="text/css" href="CSS/workflow.css" />
    <script type="text/javascript" src="script/fabric.require.js"></script>
    <script type="text/javascript" src="script/fabric.js"></script>
    <script type="text/javascript" src="script/jquery.min.js"></script>
    <script type="text/javascript" src="../../Public/ServerPath.js"></script>
    <script type="text/javascript" src="../../../webjar/layer/layer.js"></script>
    <script type="text/javascript" src="../../Public/ibcpLayer.js"></script>
    <script type="text/javascript" src="../../Public/ibcpAjax.js"></script>
    <script type="text/javascript" src="../../Public/Sign.js"></script>
    <script type="text/javascript" src="script/workflowscript.js"></script>

    <script type="text/javascript" src="script/FlowErrorPrompt.js"></script>

    <script type="text/javascript" src="../../../webjar/bootstrap/3.3.7-1/js/bootstrap.min.js"></script>

	<script type="text/javascript">
		$(function(){
            initPageFormat();
			initPage("edit");
            initPageTips();
        });
        $(window).resize(function(){
           'use strict';
            initPageFormat();
        });

        //初始化页面格式布局
        function initPageFormat(){
            'use strict';
            //属性面板宽度固定，动态调整画布部分高度
            var $width = $(window).width() - 275;
            var $height = $(window).height() - 100;
            $('#canvasbox').css('width', $width);

            if($(window).height() <= $('#installpage').height()){
                var $height = $('#installpage').height();
                $('#canvasbox').css('height', $height);
            }
            else{
                var $height = $(window).height();
                $('#canvasbox').css('height', $height);
            }
        }

        //页面提示初始化
        function initPageTips(){
            //连接线按钮提示
            $("#connect").tooltip({
                trigger:'click',
                html:true,
                placement:'bottom',
                title:'再次点击关闭连线模式'
            });

            //步骤项按钮提示
            $("#rectangle").tooltip({
                trigger:'hover',
                html:true,
                placement:'bottom',
                title:'步骤项'
            });

            //判断项按钮提示
            $("#diamond").tooltip({
               trigger:'hover',
                html:true,
                placement:'bottom',
                title:'判断项'
            });

            //删除按钮提示
            $("#delete").tooltip({
                trigger:'hover',
                html:true,
                placement:'bottom',
                title:'删除'
            })
        }
    </script>
</head>

<body style="background-color:#333">
<div class="basic" style="background-color:#999999;">

    <div class="toolCont">
        <div class="menu" style="margin-left:5px;display:inline;background-color:#999999;">
            <button onClick="Connect()" class="btn btn-custom toolBtn text-center" data-toggle="tooltip" id="connect" ><img src="img/connect.png" class="icon" alt="connect"></button>
            <button onClick="Rectangle()" class="btn btn-custom toolBtn text-center" data-toggle="tooltip" id="rectangle"><img src="img/rectangle.png" class="icon" alt="rectangle"></button>
            <button onClick="Diamond()" class="btn btn-custom toolBtn text-center" data-toggle="tooltip" id="diamond"><img class="icon" src="img/starticon.png"></button>
            <button onClick="Delete()" class="btn btn-custom toolBtn text-center" data-toggle="tooltip" id="delete"><img src="img/delete.png" class="icon" alt="delete"></button>
        </div>
        <div class="menu" style="margin-right:5px;margin-bottom:2px;display:inline;text-align:right;background-color:#999999;">
            <button onClick="ConfigInfo()" type="button" class="btn btn-custom toolBtn" data-toggle="tooltip" data-placement="bottom" title="保存"><span class="glyphicon glyphicon-floppy-saved"></span></button>
            <button onClick="LoadConfigInfo()" type="button" class="btn btn-custom toolBtn" data-toggle="tooltip" data-placement="bottom" title="加载"><span class="glyphicon glyphicon-cloud-download"></span></button>
            <button onClick="ClearPage()" type="button" class="btn btn-custom toolBtn" data-toggle="tooltip" data-placement="bottom" title="清空"><span class="glyphicon glyphicon-trash"></span></button>
            <button onClick="RefreshPage()" type="button" class="btn btn-custom toolBtn" data-toggle="tooltip" data-placement="bottom" title="刷新"><span class="glyphicon glyphicon-repeat"></span></button>
        </div>
    </div>

    <div id="canvasbox" class="workcneter" style="height:90%;overflow:auto;float:left;">
        <canvas id="canvas" width="3000" height="3000"></canvas>
    </div>



    <div id="installpage" style="width:270px;float:right;margin-bottom: 10px;background-color: #999999">
        <fieldset style="padding-bottom: 10px;width: 92%;margin: 0 auto;border-radius: 5px;background-color: #999999;">
            <legend style="font-size: 16px" >当前元素</legend>
            <div style="background-color:#999999;">
                <div style="width:98%;margin:0 auto;background-color:#999999;">
                    <select id="Current_Target" size="3" style="width:98%;margin:0 auto;"></select>
                </div>
            </div>
        </fieldset>

        <fieldset style="padding-bottom: 10px;width: 92%;margin: 0 auto;border-radius: 5px;">
            <legend style="font-size: 16px" >属性信息</legend>
            <div style="background-color:#999999;">
                <table cellspacing="1" cellpadding="1">
                    <tr bcsgrp="Info-Task">
                        <td>
                            <label>代码：</label>
                        </td>
                        <td>
                            <input type="text" readonly="readonly" id="WF_Code" wftype="Task">
                        </td>
                    </tr>
                    <tr bcsgrp="Info-Task">
                        <td>
                            <label>名称：</label>
                        </td>
                        <td>
                            <input type="text" readonly="readonly" id="WF_Name" wftype="Task">
                        </td>
                    </tr>
                    <tr bcsgrp="Info-Task">
                        <td>
                            <label>版本：</label>
                        </td>
                        <td>
                            <input type="text" readonly="readonly" id="WF_Version" wftype="Task">
                        </td>
                    </tr>
                    <tr bcsgrp="Info-Task">
                        <td>
                            <button id="WF_Edit" disabled="true" onclick="showStepSelect()" wftype="Task" class="btn btn-custom" style="height:24px;width:40px;line-height: 2px;padding:1px;">选择</button>
                        </td>
                    </tr>
                    <tr bcsgrp="Info-Gate">
                        <td>
                            <label>公式：</label>
                        </td>
                        <td>
                            <textarea id="WF_Formula" wftype="Gate" wftype="Gate" readonly="true"></textarea>
                        </td>
                    </tr>
                    <tr bcsgrp="Info-Gate">
                        <td>
                            <button id="WF_FormulaSubmit" disabled="true" onclick="formulaSubmit()" wftype="Gate" class="btn btn-custom" style="height:24px;width:40px;line-height: 2px;padding:1px;">确定</button>
                        </td>
                    </tr>
                    <tr bcsgrp="Info-Connector">
                        <td>
                            <label>连接类型：</label>
                        </td>
                        <td>
                            <select id="WF_CoType" onchange="selectCoType(this.id)" wftype="Connector" disabled="disabled">
                                <option value="0">开始-开始</option>
                                <option value="1">结束-开始</option>
                            </select>
                        </td>
                    </tr>
                    <tr bcsgrp="Info-Connector">
                        <td>
                            <label>起始点：</label>
                        </td>
                        <td>
                            <input type="text" id="WF_CoStart" wftype="Connector" readonly="true">
                        </td>
                    </tr>
                    <tr bcsgrp="Info-Connector">
                        <td>
                            <label>终止点：</label>
                        </td>
                        <td>
                            <input type="text" id="WF_CoEnd" wftype="Connector" readonly="true">
                        </td>
                    </tr>
                </table>
            </div>
        </fieldset>
    </div>

    <div id="zoombox" style="display:none">
    	<span id="zoomshow"></span>
    </div>
</div>
<div id="SignDiv" hidden="true"></div>
<div id="Add_Page" hidden="true"></div>
</body>
</html>